const myChart = echarts.init(document.querySelector(".geo"));
timeLineData = [];
datalist = [];
fetch("https://24h-aqi-list.vercel.app/api")
  .then(function (response) {
    return response.json();
  })
  .then(function (json) {
    datalist = json;
    datalist = datalist.reverse();
    for (item of datalist) {
      let str = item[0][0];
      let itemdata = item[1];
      let itemdatalist = [
        {
          name: "基准",
          value: 0,
        },
      ];
      for (let j in allarealist) {
        let newitemdata = {
          name: allarealist[j],
          value: 50,
        };
        for (i of itemdata) {
          if (i.area === allarealist[j]) {
            newitemdata.value = i.aqi;
          } else {
          }
        }
        itemdatalist.push(newitemdata);
      }
      let gettime = str.split(" ")[1].split(":")[0];
      timetext = "";
      if (Number(gettime) >= 12) {
        timetext = item[0][0] + "   " + "P.M";
      } else if (Number(gettime) <= 11) {
        timetext = item[0][0] + "   " + "A.M";
      }
      timeLineData.push(Number(gettime));
      option.baseOption.timeline.data.push(Number(gettime));
      option.options.push({
        title: [
          {
            text: timetext,
            textAlign: "center",
            left: "50%",
            top: "10%",
            textStyle: {
              fontSize: 30,
              color: "rgba(255, 255, 255, 0.7)",
            },
          },
          {
            text: "全国主要城市空气质量",
            subtext: "data from pm25.com",
            sublink: "http://www.pm25.com/",
            left: "center",
            textStyle: {
              color: "#fff",
            },
          },
        ],
        series: [
          {
            data: convertData(itemdatalist),
          },
        ],
      });
    }
    myChart.setOption(option);
  })
  .catch(function (ex) {
    console.log("parsing failed", ex);
  });

const option = {
  baseOption: {
    backgroundColor: "#08304a",
    timeline: {
      show: true,
      axisType: "category",
      tooltip: {
        show: true,
        formatter: function (params) {
          console.log(params);
          return params.name + "时";
        },
      },
      autoPlay: true,
      currentIndex: 6,
      playInterval: 2000,
      label: {
        normal: {
          show: true,
          interval: "auto",
          formatter: "{value}时",
        },
      },
      data: [],
    },
    tooltip: {
      show: true,
      formatter: (params) => {
        let data =
          "位置:" +
          params.name +
          "<br/>" +
          "AQI值:" +
          params.value[2] +
          "<br/>";
        return data;
      },
    },

    visualMap: {
      textStyle: {
        color: "#fff",
      },
      itemWidth: 30,
      itemHeight: 21,
      pieces: [
        {
          min: 0,
          max: 50,
          label: "优",
          color: "#6ccc06",
        },
        {
          min: 51,
          max: 100,
          label: "良",
          color: "#fbd029",
        },
        {
          min: 101,
          max: 150,
          label: "轻度污染",
          color: "#fe8800",
        },
        {
          min: 151,
          max: 200,
          label: "中度污染",
          color: "#fe0000",
        },
        {
          min: 201,
          max: 300,
          label: "重度污染",
          color: "#970454",
        },
        {
          min: 301,
          max: 500,
          label: "严重污染",
          color: "#62001e",
        },
      ],
    },
    geo3D: {
      environment: "black",
      boxHeight: 20,
      map: "china",
      roam: true,
      realisticMaterial: {
        detailTexture: "#666",
        textureTiling: 1,
        metalness: 0,
        roughness: 0.5,
      },
      label: {
        show: false,
        textStyle: {
          color: "#fff", //地图初始化区域字体颜色
          fontSize: 18,
          opacity: 1,
          backgroundColor: "rgba(0,23,11,0)",
        },
      },
      postEffect: {
        enable: true,
        SSAO: {
          enable: true,
          radius: 1,
          quality: "high",
        },
      },
      shading: "lambert",
      lambertMaterial: {
        detailTexture: "",
        textureTiling: 20,
      },
      itemStyle: {
        color: "https://aqi.zfe.space/images/pisa.hdr",
        opacity: 0.007,
        borderWidth: 0,
        borderColor: "rgba(0,23,11,0)",
      },
      emphasis: {
        //当鼠标放上去  地区区域是否显示名称
        label: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 3,
            backgroundColor: "rgba(0,23,11,0)",
          },
        },
      },
      //shading: 'lambert',
      light: {
        main: {
          intensity: 1,
          shadow: false,
          shadowQuality: "high",
        },
        ambient: {
          intensity: 1,
        },
        ambientCubemap: {
          texture: "https://aqi.zfe.space/images/pisa.hdr",
          exposure: 3,
          diffuseIntensity: 0.5,
          specularIntensity: 2,
        },
      },
    },
    series: [
      {
        name: "AQI",
        type: "bar3D",
        coordinateSystem: "geo3D",
        barSize: 0.8, //柱子粗细
        shading: "realistic",
        realisticMaterial: {
          metalness: 1,
          roughness: 0.2,
        },
        minHeight: 0.1,
        instancing: true,
        animation: true,
        animationDurationUpdate: 500,
        opacity: 1,
        bevelSize: 0.3,
        label: {
          show: false,
          formatter: "{b}",
        },
        data: [],
      },
    ],
  },
  options: [],
};
var convertData = function (arr) {
  var res = [];
  for (var i = 0; i < arr.length; i++) {
    var geoCoord = geoCoordMap[arr[i].name];
    if (geoCoord) {
      res.push({
        name: arr[i].name,
        value: geoCoord.concat(arr[i].value),
      });
    }
  }
  return res;
};

//进行图标参数设置
function sortByKey(array, key) {
  return array.sort(function (a, b) {
    var x = a[key];
    var y = b[key];
    return x < y ? -1 : x > y ? 1 : 0;
  });
}
if (screen.width < 768) {
  option.baseOption.series[0].shading = "lambert";
  myChart.setOption(option);
}
myChart.setOption(option);
